<template>
  <div class="goodsInfo-container">
    <transition @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
      <div v-show="isBall"
           class="ball"></div>
    </transition>
    <van-loading v-if="isLoading"
                 type="spinner"
                 color="#1989fa" />
    <main v-else>
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(item, index) in goodsInfo.imgs"
                        :key="index"
                        @click="showImgPreviw">
          <img v-lazy="item" />
        </van-swipe-item>

        <div class="custom-indicator"
             slot="indicator">
          {{ current + 1 }}/{{goodsInfo.imgs.length || 1}}
        </div>
      </van-swipe>
      <div class="goods-hd">
        <h2>{{goodsInfo.title}}</h2>
        <div class="van-hairline--bottom"></div>
        <div class="goods-price">售价：<span><i>￥</i>{{goodsInfo.new_price}}</span> 原价：<s>￥{{goodsInfo.old_price}}</s></div>
        <div class="goods-num">
          <span>购买数量：</span>
          <van-stepper v-model="goodsNum"
                       :disable-input="true"
                       min="1"
                       max="5" />
        </div>
        <div class="goods-handle">
          <van-button type="info"
                      size="small"
                      class="goods-buy">立即购买</van-button>
          <van-button type="warning"
                      size="small"
                      @click="addShopCart">加入购物车</van-button>
        </div>
      </div>
      <div class="goods-place">
        <span>发货</span>
        <p>
          <van-icon name="location-o" />&nbsp;{{goodsInfo.place}}<span>快递：0.00</span>
        </p>
      </div>
      <div class="goods-params">
        <h2>商品参数</h2>
        <div class="van-hairline--bottom"></div>
        <p>商品品牌：{{goodsInfo.params.brand}}</p>
        <p>上市时间：{{goodsInfo.params.add_time | dateFormat}}</p>
        <p>商品编号：{{goodsInfo.params.number}}</p>
      </div>
      <div class="goods-desc">
        <h2>商品简介</h2>
        <div class="van-hairline--bottom"></div>
        <p>{{goodsInfo.desc}}</p>
      </div>
    </main>
  </div>
</template>

<script>
import { ImagePreview, Toast } from 'vant'

export default {
  data() {
    return {
      isBall: false,
      isLoading: true,
      current: 0,
      goodsNum: '',
      id: this.$route.params.id,
      goodsInfo: {}
    }
  },
  created() {
    this.getGoodsInfo()
  },
  methods: {
    // 获取商品信息
    getGoodsInfo() {
      this.axios.get('/goods/getGoodsInfo', { params: { id: this.id } }).then(res => {
        if (res.data.code == 1) {
          this.isLoading = false
          this.goodsInfo = res.data.goodsInfo
        }
      })
    },
    // 轮播图切换，指示器切换
    onChange(index) {
      this.current = index;
    },
    // 轮播图缩略图显示
    showImgPreviw() {
      ImagePreview(this.goodsInfo.imgs)
    },
    // 加入购物车
    addShopCart() {
      let u = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user'))._id : ''
      if (u) {
        this.isBall = !this.isBall
        let goodsMsg = { id: this.id, new_price: this.goodsInfo.new_price, imgs: this.goodsInfo.imgs, count: this.goodsNum, isSelect: false }
        this.$store.commit('addShopCart', goodsMsg)
      } else {
        Toast('登录后才能加入购物车哦！')
      }

    },
    // 购物车小球动画
    beforeEnter(el) {
      el.style.transform = 'translate(0, 0)'
    },
    enter(el, done) {
      let badge = document.querySelector('.van-info')
      let x = badge.getBoundingClientRect().left - el.getBoundingClientRect().left
      let y = badge.getBoundingClientRect().top - el.getBoundingClientRect().top
      el.offsetHeight
      el.style.transform = `translate(${x}px,${y}px)`
      el.style.transition = '0.5s cubic-bezier(0.49, -0.29, 0.75, 0.41)';
      done()
    },
    afterEnter(el) {
      setTimeout(() => {
        this.isBall = !this.isBall
      }, 450)
    }
  }
}
</script>

<style lang="scss">
.goodsInfo-container {
  background-color: #f2f3f5;
  padding-bottom: 0.3rem;
  .ball {
    position: absolute;
    z-index: 1000;
    left: 2.95rem;
    top: 11.65rem;
    width: 0.35rem;
    height: 0.35rem;
    background-color: red;
    border-radius: 50%;
  }
  .van-loading {
    padding: 1rem 0;
    text-align: center;
  }
  .van-swipe {
    position: relative;
    img {
      vertical-align: middle;
      width: 100%;
      height: 8rem;
    }
    .custom-indicator {
      position: absolute;
      color: #fff;
      padding: 0.04rem 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
      background: rgba(0, 0, 0, 0.3);
    }
  }
  .goods-hd {
    background-color: #fff;
    margin: 0.4rem 0;
    padding: 0 0.3rem 0.3rem;
    h2 {
      margin: 0;
      font-size: 0.4rem;
      line-height: 0.8rem;
    }
    .goods-price {
      color: #555;
      margin: 0.2rem 0;
      span {
        font-size: 0.46rem;
        color: red;
        font-weight: bold;
        margin-right: 0.3rem;
        i {
          font-style: normal;
          font-size: 0.34rem;
        }
      }
    }
    .goods-num {
      display: flex;
      align-items: center;
      margin: 0.22rem 0;
      color: #555;
      .van-stepper {
        input {
          color: #323232;
        }
      }
    }
    .goods-handle {
      .goods-buy {
        margin-right: 0.2rem;
      }
    }
  }
  .goods-place {
    background-color: #fff;
    padding: 0.3rem;
    display: flex;
    margin: 0.4rem 0;
    > span {
      margin-right: 0.5rem;
      color: #aaa;
    }
    p {
      margin: 0;
      i {
        color: #aaa;
      }
      span {
        margin-left: 0.5rem;
      }
    }
  }
  .goods-params {
    background-color: #fff;
    padding: 0 0.3rem 0.1rem;
    margin: 0.4rem 0;
    h2 {
      margin: 0;
      font-size: 0.4rem;
      line-height: 0.8rem;
    }
    p {
      margin: 0;
      color: #555;
      margin: 0.2rem 0;
    }
  }
  .goods-desc {
    background-color: #fff;
    padding: 0 0.3rem;
    h2 {
      margin: 0;
      font-size: 0.4rem;
      line-height: 0.8rem;
    }
    p {
      margin: 0;
      line-height: 0.8rem;
    }
  }
}
</style>